﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Templates/Template.Master"
    Inherits="System.Web.Mvc.ViewPage<TaxiCaosWeb.Models.Reserva>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server">
    Registrar Reserva
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="menuContent" runat="server">
  <%
    string[] menuArray = { "0", "0", "0", "0", "0", "1", "0", "0" };
    Session["menuArray"] = menuArray;
  %>
  <base target="_self" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
    
    <script type="text/javascript">


        $(document).ready(function () {

            // Se cargan los datepicker y timepicker para controlar el tiempo de la reserva
            $(".datepicker").datepicker();
            $('.timepicker').timepicker();

            // validar formulario
            $("#reservaForm").validate({
                submitHandler: function (form) {
                    submitFormReserva(form);
                },
                rules: {
                    Nombres: "required",
                    Apellidos: "required",
                    Telefono: "required",
                    Email: {
                        required: true,
                        email: true
                    },
                    Fecha: "required",
                    Hora: "required",
                    Direccion: "required",
                    Importe: "required"
                },
                messages: {
                    Importe: "Debe obtener la tarifa para la reserva."
                }
            });

        });

        function submitFormReserva(form) {

            var $form = $(form);

            $.ajax({
                type: "POST",
                url: $form.attr('action'),
                data: $form.serialize(),
                error: function (xhr, status, error) {
                    $("#loading-div-background").hide();
                    $.msgBox({
                        content: error,
                        type: "error"
                    });
                },
                success: function (data) {
                    $("#loading-div-background").hide();
                    if (data.tipoMensaje == 'INFO') {
                        $.msgBox({
                            content: data.mensaje,
                            type: "info",
                            afterClose: function () {
                                $.msgBox({
                                    title: "Confirma Cambios",
                                    content: "Desea realizar el pago de la reserva?",
                                    type: "confirm",
                                    buttons: [{ value: "Si" }, { value: "No"}],
                                    success: function (result) {
                                        if (result == "Si") {
                                            window.showModalDialog('/Pago/Pago', '', 'status:1; resizable:0; center:1; dialogWidth:630px; dialogHeight:360px;');
                                        }
                                        if (result == "No") {                                            
                                            window.location = data.redirectTo; 
                                        }
                                    }
                                });                                
                            }                            
                        });
                    } else if (data.tipoMensaje == 'WARN') {
                        $.msgBox({                            
                            content: data.mensaje,
                            type: "alert"
                        });
                    }

                },
                beforeSend: function (data) {
                    $("#loading-div-background").show();
                }
            });

            return false;
        }

    </script>
    <div class="nosotros">
        <h1>
            Reserva</h1>
        
        <div style="margin-top: 5px; height: 285px; overflow-y: scroll;">
            <% using (Html.BeginForm("Reserva", "Reserva", FormMethod.Post, new { @id = "reservaForm", @class = "cmxform" }))
               {%>
            <fieldset style="width: 550px;">
                <legend><b>Datos Tarifa</b></legend>
                <table style="width: 100%;">
                    <tr>
                        <td>
                            <a class="tryitbtn" style="margin-top: 5px;" href="/Reserva/Tarifario">Obtener Tarifa
                                »</a>
                        </td>
                    </tr>
                </table>
                <table style="width: 100%;">
                    <tr>
                        <td>
                            Origen
                        </td>
                        <td>
                            <%= Html.DropDownList("distritoOrig", (IEnumerable<SelectListItem>)ViewData["DistritosOrigen"], new { @disabled = "" })%>
                        </td>
                        <td>
                            Destino
                        </td>
                        <td>
                            <%= Html.DropDownList("distritoDest", (IEnumerable<SelectListItem>)ViewData["DistritosDestino"], new { @disabled = "" })%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Importe
                        </td>
                        <td>
                            <%: Html.TextBoxFor(model => model.Importe, new { @disabled = "", @class = "required", @style = "width:60px;text-align:right;" })%>
                        </td>
                    </tr>
                </table>
            </fieldset>            
            <br />
            <fieldset style="width: 550px;">
                <legend><b>Datos Personales</b></legend>
                <table style="width: 100%;">
                    <tr>
                        <td>
                            Nombres (*)
                        </td>
                        <td style="width: 200px;">                            
                            <%: Html.TextBoxFor(model => model.Nombres, new { @style = "width:180px;" })%>                            
                        </td>
                        <td>
                            Apellidos (*)
                        </td>
                        <td>
                            <%: Html.TextBoxFor(model => model.Apellidos, new { @style = "width:180px;" })%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Telefono (*)
                        </td>
                        <td>
                            <%: Html.TextBoxFor(model => model.Telefono, new { @style = "width:100px;" })%>
                        </td>
                        <td>
                            Email (*)
                        </td>
                        <td>
                            <%: Html.TextBoxFor(model => model.Email, new { @style = "width:180px;" })%>
                        </td>
                    </tr>
                </table>
            </fieldset>
            <br />
            <fieldset style="width: 550px;">
                <legend><b>Datos de Reserva</b></legend>
                <table style="width: 100%;">
                    <tr>
                        <td>
                            Fecha (*)
                        </td>
                        <td style="width: 150px;">
                            <%: Html.TextBox("Fecha", null, new { @class = "datepicker", @style = "width:100px;" })%>
                        </td>
                        <td style="width: 50px;">
                            Hora (*)
                        </td>
                        <td>
                            <%: Html.TextBox("Hora", null, new { @class = "timepicker", @style = "width:50px;"})%>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Direccion (*)
                        </td>
                        <td colspan="3">
                            <%: Html.TextBoxFor(model => model.Direccion, new { @style = "width:350px;" })%>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 80px">
                            Comentarios Adicionales
                        </td>
                        <td colspan="3">
                            <%= Html.TextAreaFor(model => model.Comentarios, 20, 10, new { @style = "width:445px;height:100px;" })%>                            
                        </td>
                    </tr>
                </table>
            </fieldset>
                       
                <input id="btnSubmit" type="submit" value="Realizar Reserva" style="background-color: steelblue;
                color: white; font-weight: bold; margin-top: 5px;" />
                
            <% } %>
        </div>
    </div>  

</asp:Content>
